import Base from '../../base.js'
export default class AddStudent extends Base {
    render() {
        $('#content').html(`
        <div style="margin: 30px 10px 0 20px " id='nav'>
        <span class="layui-breadcrumb">
            <a>种猪培训班</a>
            <a>种猪一班</a>
            <a>添加学生</a>
         </span>
         <hr/>
        </div>
        <h1 style="margin: 10px 10px 0 20px ">新增种猪</h1>
        <hr/>
        <div style='width:300px;margin:auto'>
        <form class="layui-form" action="" lay-filter="formTest" >
        <div class="layui-form-item">
            <label class="layui-form-label">姓名</label>
            <div class="layui-input-block">
                <input type="text" name="title" required lay-verify="required" placeholder="请输入姓名" autocomplete="off"
                    class="layui-input" id="student_name">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">年龄</label>
            <div class="layui-input-block">
                <input type="text" name="title" required lay-verify="required" placeholder="请输入年龄" autocomplete="off"
                    class="layui-input" id="student_age">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">性别</label>
            <div class="layui-input-block" >
                <input type="radio" name="sex" value="男" title="男" lay-filter='gender' checked>
                <input type="radio" name="sex" value="女" title="女" lay-filter='gender'>
          </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">成绩</label>
            <div class="layui-input-block">
                <input type="text" name="title" required lay-verify="required" placeholder="请输入成绩" autocomplete="off"
                    class="layui-input" id="student_score">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">地址</label>
            <div class="layui-input-block">
                <input type="text" name="title" required lay-verify="required" placeholder="请输入地址" autocomplete="off"
                    class="layui-input" id="student_add">
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
            <button type='button' id='addstudentBtn' class="layui-btn" lay-submit lay-filter="formDemo">添加</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>
        </form>
        </div>
        `)
    }
    handle() {
        $("script[type='module']").append(`
        <script>
        //Demo
        layui.use(['element','form'], function(){
            var form = layui.form,
            element = layui.element;
            element.render('#nav')
            });
        </script>
        `)
        $('#addstudentBtn').click(() => {
            $.ajax({
                type: 'post',
                url: '/api/student/add',
                data: {
                    username: $('#student_name').val(),
                    age: $('#student_age').val(),
                    gender: $('input[type="radio"]:checked').val(),
                    address: $('#student_add').val(),
                    score: $('#student_score').val(),
                },
                dataType: 'json',
                success: (data) => {
                    if (data.code == 1) {
                        alert(data.msg);
                        window.location.hash = '#/Main/student'
                    } else {
                        alert(data.msg);
                    }
                }
            })
        })
    }
}